{layout name="layout"}
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
	<!-- <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a> -->
</script>

<script id="addForm" type="text/html">
	<div class="layer-form">
		<form class="layui-form layui-form-pane">

            <div class="layui-form-item">
				<label class="layui-form-label">所属试卷</label>
				<div class="layui-input-block">
					<select name="test_id" lay-verify="required" id="add_test_id" >
                    </select>
				</div>
			</div>

			<div class="layui-form-item  layui-form-text">
				<label class="layui-form-label">题目名称</label>
				<div class="layui-input-block">
                    <textarea name="topic_name" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
				</div>
			</div>

            <div class="layui-form-item">
				<label class="layui-form-label">题目类型</label>
				<div class="layui-input-block">
					<select name="topic_type" lay-verify="required"  lay-filter="add_topic_type" >
                        <option value="">请选择题目类型</option>
                        <option value="1">单选题</option>
                        <option value="2">多选题</option>
                        <option value="3">判断题</option>
                    </select>
				</div>
			</div>

            <div id="add_topic_choice">

            </div>
            <div class="layui-form-item">
				<label class="layui-form-label">正确答案</label>
				<div class="layui-input-block">
                    <input type="text" name="topic_answer" autocomplete="off" placeholder="请输入大写英文字母(多选题请用英文字符逗号隔开,例如:A,B,C)" lay-verify="required"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<button class="layui-btn" lay-submit lay-filter="addSubmit">确认</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</script>


<script id="topic_type_1" type="text/html">
    <div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项A</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_A" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项B</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_B" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项C</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_C" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项D</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_D" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
    </div>
</script>

<script id="topic_type_2" type="text/html">
    <div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项A</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_A" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项B</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_B" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项C</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_C" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项D</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_D" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div id="topic_type_2_add">

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" type="button" id="addChoice">添加选项</button>
            </div>
        </div>
    </div>
</script>

<script id="topic_type_3" type="text/html">
    <div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项A</label>
            <div class="layui-input-block">
                <input value="正确" readonly type="text" name="topic_choice_A" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项B</label>
            <div class="layui-input-block">
                <input value="错误" readonly type="text" name="topic_choice_B" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
    </div>
</script>



<script>
    window.onload = () => {
        layui.config({
            base: '/static/layui/ext/'
        }).use('tableSelect');
        layui.use(["tableSelect"], function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
            //得到各种内置组件
            let layer = layui.layer //弹层
                ,
                laypage = layui.laypage //分页
                ,
                laydate = layui.laydate //日期
                ,
                table = layui.table //表格
                ,
                carousel = layui.carousel //轮播
                ,
                upload = layui.upload //上传
                ,
                element = layui.element //元素操作
                ,
                slider = layui.slider //滑块
                ,
                dropdown = layui.dropdown //下拉菜单
                , form = layui.form
                , tableSelect = layui.tableSelect;




            //执行一个 table 实例
            table.render({
                elem: '#demo',
                url: "{:url('/member/test/listtopic')}" //数据接口
                ,
                page: true //开启分页
                ,
                toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            title: '#',
                            width: 80,
                            sort: true,
                            fixed: 'left'
                        },
                        {
                            field: 'topic_name',
                            title: '题目名称'
                        },
                        {
                            field: 'topic_name',
                            title: '题目类型',
                            templet: (data) => {
                                switch (data.topic_type) {
                                    case 1:
                                        return "单选题";
                                    case 2:
                                        return "多选题";
                                    case 3:
                                        return "判断题";
                                }
                            }
                        },
                        {
                            field: 'topic_choice',
                            title: '题目选项'
                        },
                        {
                            field: 'topic_answer',
                            title: '题目答案'
                        },
                        {
                            field: 'test_name',
                            title: '所属试卷'
                        },
                        {
                            fixed: 'right',
                            width: 150,
                            align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function (obj) {
                let checkStatus = table.checkStatus(obj.config.id),
                    data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        let layero = layer.open({
                            type: 1,
                            area: ['50%', '90%'], // 宽高
                            content: $("#addForm").html(),
                            success: () => {
                                let temp = "<option value=''>请选择所属试卷</option>";
                                $.ajax({
                                    url: "{:url('/member/test/listalltest')}",
                                    success: res => {
                                        let arr = res.data;
                                        $.each(arr, (i, v) => {
                                            temp += "<option value='" + v.id + "'>" + v.test_name + "</option>"
                                        });
                                        $("#add_test_id").html(temp);
                                        form.render();
                                    }
                                });


                                let nowAsc = 68;
                                form.on('select(add_topic_type)', function (data) {
                                    let elem = data.elem; // 获得 select 原始 DOM 对象
                                    let value = data.value; // 获得被选中的值
                                    let othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

                                    switch (value) {
                                        case "1":
                                            let htmlStr1 = $("#topic_type_1").html();
                                            $("#add_topic_choice").html(htmlStr1);
                                            break;
                                        case "2":
                                            let htmlStr2 = $("#topic_type_2").html();
                                            $("#add_topic_choice").html(htmlStr2);

                                            $("#addChoice").click(() => {
                                                nowAsc = nowAsc + 1;
                                                let nowChoice = String.fromCharCode(nowAsc);
                                                let htmlStr = `
                                                <div class="layui-form-item">
            <label class="layui-form-label">选项`+ nowChoice + `</label>
            <div class="layui-input-block">
                <input type="text" name="topic_choice_`+ nowChoice + `" autocomplete="off" placeholder="请输入" lay-verify="required"
                    class="layui-input">
            </div>
        </div>
                                                `;
                                                $("#topic_type_2_add").append(htmlStr);

                                            });
                                            break;
                                        case "3":
                                            let htmlStr3 = $("#topic_type_3").html();
                                            $("#add_topic_choice").html(htmlStr3);
                                            break;
                                        default:
                                            let htmlStr4 = "";
                                            $("#add_topic_choice").html(htmlStr4);
                                            break;
                                    }

                                });


                                form.render();
                                form.on('submit(addSubmit)', function (data) {
                                    let field = data.field; // 获取表单字段值
                                    let stemp = { ...field };
                                    let sdata = {};
                                    sdata.topic_name = field.topic_name;
                                    sdata.topic_answer = field.topic_answer;
                                    sdata.test_id = field.test_id;
                                    sdata.topic_type = field.topic_type;
                                    delete (stemp.topic_name);
                                    delete (stemp.topic_answer);
                                    delete (stemp.test_id);
                                    delete (stemp.topic_type);
                                    let choice = JSON.stringify(stemp);
                                    sdata.topic_choice = choice;

                                    $.ajax({
                                        url: "{:url('/member/test/addtopic')}",
                                        type: "POST",
                                        data: sdata,
                                        success: function (res) {
                                            if (res.code === 0) {
                                                layer.msg(res.msg, { icon: 1 });
                                                table.reload("demo");
                                            } else {
                                                layer.msg(res.msg, { icon: 2 });
                                            }
                                        }
                                    })

                                    return false; // 阻止默认 form 跳转
                                });
                            }
                        });
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            let layero = layer.open({
                                type: 1,
                                area: ['50%', '90%'], // 宽高
                                content: "无法编辑",
                                success: () => {

                                }
                            });
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            let ids = [];
                            $.each(data, (i, v) => {
                                ids.push(v.id);
                            });
                            $.ajax({
                                url: "{:url('/member/test/softdeletetopic')}",
                                data: { ids },
                                type: "post",
                                success: res => {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, { icon: 1 });
                                        setTimeout(() => {
                                            window.location.reload();
                                        }, 1500);
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            });

                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                let data = obj.data //获得当前行数据
                    ,
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'edit') {
                    let layero = layer.open({
                        type: 1,
                        area: ['50%', '90%'], // 宽高
                        content: "无法编辑",
                        success: () => {

                        }
                    });

                } else if (layEvent === 'delete') {
                    let id = data.id;
                    let ids = [];
                    ids.push(id);
                    $.ajax({
                        url: "{:url('/member/test/softdeletetopic')}",
                        data: { ids },
                        type: "post",
                        success: res => {
                            if (res.code === 0) {
                                layer.msg(res.msg, { icon: 1 });
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                layer.msg(res.msg, { icon: 2 });
                            }
                        }
                    });
                }
                else if (layEvent === 'more') {
                    //下拉菜单
                    dropdown.render({
                        elem: this //触发事件的 DOM 对象
                        ,
                        show: true //外部事件触发即显示
                        ,
                        data: [{
                            title: '编辑',
                            id: 'edit'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'del') {
                                layer.confirm('真的删除行么', function (index) {
                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    //向服务端发送删除指令
                                });
                            } else if (menudata.id === 'edit') {
                                layer.msg('编辑操作，当前行 ID:' + data.id);
                            }
                        },
                        align: 'right' //右对齐弹出（v2.6.8 新增）
                        ,
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    })
                }
            });




        });

    };
</script>